<!doctype html>
<!-- The DOCTYPE declaration above will set the    -->
<!-- browser's rendering engine into               -->
<!-- "Standards Mode". Replacing this declaration  -->
<!-- with a "Quirks Mode" doctype may lead to some -->
<!-- differences in layout.                        -->

<html>
  <head>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">

    <!--                                                               -->
    <!-- Consider inlining CSS to reduce the number of requested files -->
    <!--                                                               -->
    <link type="text/css" rel="stylesheet" href="mmd_gwt.css">

    <!--                                           -->
    <!-- Any title is fine                         -->
    <!--                                           -->
    <title>MikuMikuDance on GWT実験場</title>
    
    <!--                                           -->
    <!-- This script loads your compiled module.   -->
    <!-- If you add any GWT meta tags, they must   -->
    <!-- be added before this line.                -->
    <!--                                           -->
    <script type="text/javascript" language="javascript" src="gl-matrix-min.js"></script>
    <script type="text/javascript" language="javascript" src="mmd_gwt/mmd_gwt.nocache.js"></script>
    
    <script id="shader-fs" type="x-shader/x-fragment">
      precision mediump float;
      varying vec3 vLighting;
      varying vec2 texCoord;     
      uniform sampler2D texture0;
      uniform vec4 vColor; 
      uniform float useTexture;
      
      void main(void) {
        vec4 texelColor = texture2D(texture0, texCoord);
        gl_FragColor = vColor * (1.0 - useTexture) + vec4(texelColor.rgb, texelColor.a) * useTexture;
      }
    </script>
    <script id="shader-vs" type="x-shader/x-vertex">
      attribute vec3 pos;
      attribute vec3 norm;
      attribute vec2 coord;
      
      uniform mat4 uNormalMatrix;
      uniform mat4 uMVMatrix;
      uniform mat4 uPMatrix;

      varying vec2 texCoord;      
      varying vec3 vLighting;
      
      void main(void) {
        gl_Position = uPMatrix * uMVMatrix * vec4(pos, 1.0);
        vec3 ambientLight = vec3(0.6, 0.6, 0.6);  
        vec3 directionalLightColor = vec3(0.5, 0.5, 0.75);  
        vec3 directionalVector = vec3(0.85, 0.8, 0.75);  
          
        vec4 transformedNormal = uNormalMatrix * vec4(norm, 1.0);  
          
        float directional = max(dot(transformedNormal.xyz, directionalVector), 0.0);  
        vLighting = ambientLight + (directionalLightColor * directional);  
        texCoord = coord;
      }
    </script>
    
  </head>

  <!--                                           -->
  <!-- The body can have arbitrary html, or      -->
  <!-- you can leave the body empty if you want  -->
  <!-- to create a completely dynamic UI.        -->
  <!--                                           -->
  <body>

    <!-- OPTIONAL: include this if you want history support -->
    <iframe src="javascript:''" id="__gwt_historyFrame" tabIndex='-1' style="position:absolute;width:0;height:0;border:0"></iframe>
    
    <!-- RECOMMENDED if your web app will not function without JavaScript enabled -->
    <noscript>
      <div style="width: 22em; position: absolute; left: 50%; margin-left: -11em; color: red; background-color: white; border: 1px solid red; padding: 4px; font-family: sans-serif">
        Your web browser must have JavaScript enabled
        in order for this application to display correctly.
      </div>
    </noscript>

    <h1>MikuMikuDance on GWT実験場</h1>
    
    <div align="center"><a href="http://yzwlab.net/argil/">ARgil</a>のときにつくったC++ MMDエンジンをJava+GWTに移植できんもんか的な。<br/>
    Chromeで実験中。テクスチャの透明度処理とか光源処理とか物理演算とか色々足りてないよう。</div>
    <br/>
    <br/>

    <table align="center">
      <tr>
        <td colspan="2">MMD 3D View:</td>
      </tr>
      <tr>
        <td id="canvas3d" colspan="2" align="center"></td>
      </tr>
      <tr>
        <td id="canvas3d_ctrl" valign="top"></td>
        <td id="dropFieldContainer" align="center"></td>
      </tr>
      <tr>
        <td colspan="2"><div id="resources_3d" style="visibility: hidden;width: 1px; height: 1px;"></div></td>
      </tr>
    </table>
    <br/>
    <br/>
    <br/>
    <div align="center">作ってる人: <a href="http://twitter.com/yacchin1205">yacchin1205</a>&nbsp;&nbsp;コード(すげー適当): <a href="http://code.google.com/p/java-mmd">java-mmd</a></div>
    <div align="center">サンプルMMDモデル: <a href="http://3xma.blog49.fc2.com/blog-entry-1.html">DIVA風ミク / ままま様</a>(ちょうかわいい)</div>
  </body>
</html>
